.preview {
  .main-image {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50%;
  }
  .el-dialog--small {
    top: 50% !important;
    width: 940px;
    margin-top: -326px;
  }
  .preview_comtent {
    width: 900px;
    height: 550px;
    overflow: hidden;
    border-radius: 4px;
    .hard {
      background: #f1f1f1;
      color: #333;
      box-shadow: inset 0 0 5px #666;
      font-weight: bold;
      line-height: 550px;
      text-align: center;
    }
    .odd {
      background-image: linear-gradient(right, #FFF 95%, #C4C4C4 100%);
      box-shadow: inset 0 0 5px #666;
    }
    .even {
      background-image: linear-gradient(left, #fff 95%, #dadada 100%);
      box-shadow: inset 0 0 5px #666;
    }
  }
  .preview_page {
    position: relative;
    float: left;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
    font-size: 0;
    text-align: center;
    background: #fff;
    user-select: none;
    &:nth-child(even) {
      border: 0;
    }
    .page_num {
      position: absolute;
      bottom: 4px;
      font-size: 12px;
      &.left {
        left: 4px;
      }
      &.right {
        right: 4px;
      }
    }
  }
}
